<template>
	<gui-page :customHeader="true" isHeaderSized headerClass="gui-bg-primary">
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading @goHome="goHome" :home="false"
					:backButtonClass="['gui-color-white']"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h5 gui-blod gui-flex1 gui-text-left gui-color-white gui-ellipsis gui-primary-text">进度</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>

			<view 
				class="gui-padding" 
				style="margin-top:60rpx;">
					<view 
					class="gui-relative gui-flex gui-rows gui-justify-content-end">
						<view 
						class="gui-time-line-body gui-border-box gui-border-l">
							<text class="gui-time-line-txt gui-border-radius-small gui-block gui-bg-white gui-dark-bg-level-3">网络约约~</text>
							<text class="gui-time-line-time gui-color-gray">打电话了 2018-06-20</text>
						</view>
						<text class="gui-left-block gui-time-line-icon gui-block gui-icons gui-bg-blue gui-color-white">01</text>
					</view>
					<view class="gui-relative gui-flex gui-rows gui-justify-content-end">
						<view class="gui-time-line-body gui-border-box gui-border-l">
							<image src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=80" 
							style="width:590rpx; height:330rpx; border-radius:10rpx;"></image>
							<text class="gui-time-line-time gui-color-gray">图片演示 2018-06-20</text>
						</view>
						<text class="gui-left-block gui-time-line-icon gui-block gui-icons gui-bg-blue gui-color-white">02</text>
					</view>
					<view class="gui-relative gui-flex gui-rows gui-justify-content-end">
						<view class="gui-time-line-body gui-border-box gui-border-l">
							<text class="gui-time-line-txt gui-border-radius-small gui-block gui-bg-white gui-dark-bg-level-3">左边为一个图标</text>
							<text class="gui-time-line-time gui-color-gray">2018-06-20</text>
						</view>
						<text class="gui-left-block gui-time-line-icon gui-block gui-icons gui-bg-blue gui-color-white">&#xe6d1;</text>
					</view>
					<view class="gui-relative gui-flex gui-rows gui-justify-content-end">
						<view class="gui-time-line-body gui-border-box">
							<text class="gui-time-line-txt gui-border-radius-small gui-block gui-bg-white gui-dark-bg-level-3">左边为一个图片</text>
							<text class="gui-time-line-time gui-color-gray">2018-06-20</text>
						</view>
						<view class="gui-left-block gui-img-in">
							<image 
							mode="aspectFill" 
							src="https://images.unsplash.com/photo-1663757776942-e14af9c11019?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80" 
							class="gui-time-line-img"></image>
						</view>
					</view>
				</view>


		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {

				
			}
		},
		onLoad: function() {

		},
		methods: {
			init() {

			}
			

		}
	}
</script>

<style lang="scss" scoped>

	.gui-left-block{width:80rpx; height:80rpx; position:absolute; z-index:2; left:0; top:0;}
	.gui-time-line-icon{line-height:80rpx; text-align:center; font-size:32rpx; border-radius:80rpx;}
	.gui-time-line-img{width:80rpx; height:80rpx; border-radius:80rpx;}
	.gui-time-line-body{width:650rpx; font-size:0; padding-bottom:30rpx; padding-left:60rpx;}
	.gui-time-line-txt{line-height:40rpx; font-size:26rpx; padding:20rpx;}
	.gui-time-line-time{line-height:36rpx; font-size:22rpx; display:block; text-align:right; margin-top:5px;}
	.gui-time-line-image{width:600rpx;}
</style>